/**
 * Bootstrap 全局组件样式自定义
 */

/* 页默认样式 */
html {
    font-size: #{$GlobalRootEmSize}px;
    background: #fff;
}

body {
    @include fontSizeToRem(16px);
    font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Segoe UI", "Microsoft Yahei", Tahoma, Arial, STHeiti, sans-serif;
    background: #fff;
    color: #000;
}

a,
a:hover,
a:focus,
a:active,
a:visited {
    text-decoration: none;
}

/* 后台系统独有的特殊样式 */
html,
body,
body > [ng-view] {
    height: 100%;
}

/* 低版本浏览器的升级提示样式 */
.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* 栅格系统 */
.col-xs-12 {
    padding-right: pxToRem(15px);
    padding-left: pxToRem(15px);
}

/* 排版样式 */
.h3, h3 {
    @include fontSizeToRem(24px);
}

/* 按钮样式 */
.btn {
    min-width: pxToRem(160px);
    padding: pxToRem(13px) pxToRem(15px);
    @include fontSizeToRem(26px);
    line-height: 1;
    border-radius: pxToRem(6px);
}

.btn-primary {
    color: #fff;
    background-color: #000000;
    border-color: #111111;
    &:hover,
    &.focus,
    &:focus,
    &.active,
    &:active
    &.visited,
    &:visited {
        color: #fff;
        background-color: #404040;
        border-color: #555555;
    }
}

/* 标签样式 */
.badge {
    min-width: pxToRem(10px);
    padding: pxToRem(3px) pxToRem(6px);
    font-size: pxToRem(12px);
    font-weight: normal;
    border-radius: pxToRem(2px);
    & > * {
        vertical-align: middle;
    }
    &-gender {
        margin-left: pxToRem(10px);
        font-weight: normal;
        font-size: pxToRem(18px);
        &-male {
            background-color: #99BBf7;
        }
        &-female {
            background-color: #f994ab;
        }
        & > * {
            display: inline-block;
            vertical-align: middle;
            height: .8em;
        }
    }
    &-price {
        padding: pxToRem(4px) pxToRem(10px);
        font-size: pxToRem(20px);
        background-color: #76cbee;
    }
}

/* 媒体对象 */

// flex
.media {
    margin-top: pxToRem(15px);
    .media-left,
    .media > .pull-left,
    .media-right,
    .media > .pull-right {
        padding-right: pxToRem(10px);
    }
    .media-body {
        width: auto;
        .media-heading {
            margin-top: 0;
            margin-bottom: 0;
            & > * {
                vertical-align: middle;
            }
        }
    }
}